<script setup lang="ts">
definePageMeta({
  layout: 'default',
  title: '分享赚钱',
  i18n: 'menu.share',
})
const { t } = useI18n();
const httpss=ref('https://vant-ui.github.io/vant/#/zh-CN/icon')
const copy = () => {
    navigator.clipboard.writeText(httpss.value)
        .then(() => {
            showSuccessToast(t('common.replicated'));
        })
        .catch(err => {
            showFailToast('复制失败');
        });
};
</script>

<template>
  <div mx-auto text-16 text-dark dark:text-white>
    <div>
      <img src="~/assets/images/3.jpg" class="w-full" alt="">
    </div>
    <div class="mt-16">
      <div class="flex items-center w-full rounded-10 bg-#ffffff px-15 py-18">
        <img class="w-24 h-25  " src="/img/invite.png" alt="">
        <div class="ml-10">
          <div class="font-bold text-18">0</div>
          <div class="text-12 text-#2d2d2d">{{t('my_page.share.gold')}}</div>
        </div>
      </div>
    </div>
    <div class="mt-10 flex justify-between">
      <div class="flex items-center w-full rounded-10 bg-#ffffff px-15 py-16 mr-10">
        <img class="w-24 h-23  " src="/img/register.png" alt="">
        <div class="ml-10">
          <div class="font-bold text-18">0</div>
          <div class="text-12 text-#2d2d2d">{{t('my_page.share.register')}}</div>
        </div>
      </div>
      <div class="flex items-center w-full rounded-10 bg-#ffffff px-15 py-16">
        <img class="w-24 h-24  " src="/img/success-num.png" alt="">
        <div class="ml-10">
          <div class="font-bold text-18">0</div>
          <div class="text-12 text-#2d2d2d">{{t('my_page.share.success')}}</div>
        </div>
      </div>
    </div>
    <!-- 邀请链接 -->
    <div class="invite mt-10 rounded-10 p-10  text-#ffffff">
      <div class="font-bold">{{t('my_page.share.link')}}</div>
      <div class="mt-10 flex justify-between items-center">
        <div>
          <van-icon name="link-o" class="mr-5" />
          <span class="text-12 ">{{httpss}}</span>
        </div>
        <div class="px-10 py-2 text-12 rounded-full bg-#ffffff text-[var(--c-primary)]" @click="copy">复制</div>
      </div>
    </div>
    <!-- 活动条件 -->
    <div class="mt-10 rounded-10 p-10 ">
      <div class="condition font-bold text-15">{{t("my_page.share.condition")}}</div>
      <div class="text-12 color-#494949 mt-9">活动对象:活动内容，活动文本</div>
      <div class="condition font-bold text-15 mt-20">{{t("my_page.share.content")}}</div>
      <div class="text-12 color-#494949 mt-9">活动对象:活动内容，活动文本</div>
    </div>
  </div>
</template>
<style lang="css">
.invite {
  /* background: linear-gradient(to right, #9cbbe9 0%, var(--c-primary) 50%, #9cbbe9 100%); */
  height: 86px;
  background: url('/img/invite-bg.png') no-repeat;
  background-size: 100% 100%; 
}
.condition{
  background: url('/img/condition-bg.png') no-repeat;
  background-size: cover; 
  padding-left: 30px;
}
</style>
